<template>
  <view class="bg-gradient-to-br from-blue-50 to-blue-100 min-h-screen py-20rpx">
    <view class="w-full mx-auto bg-white rounded-24rpx shadow-lg overflow-hidden">
      <!-- 头部 -->
     
        <Head></Head>
        <view class="p-4">
        <form @submit="handleSubmit">
          <!-- 基本信息 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">基本信息</text>
            </view>
            
            <view class="space-y-32rpx">
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">姓名 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.name" 
                  type="text" 
                  placeholder="请输入您的姓名" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">身份证号码 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.idNumber" 
                  type="text" 
                  placeholder="请输入18位身份证号码" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">性别 <text class="text-red-500">*</text></text>
                <nut-radio-group v-model="formData.gender" direction="horizontal" class="mt-12rpx">
                  <nut-radio label="male">男</nut-radio>
                  <nut-radio label="female">女</nut-radio>
                </nut-radio-group>
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">年龄 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.age" 
                  type="number" 
                  min="18" 
                  max="65" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">电话号码 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.phone" 
                  type="tel" 
                  placeholder="请输入11位手机号码" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">电子邮箱 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.email" 
                  type="email" 
                  placeholder="用于接收通知" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
            </view>
          </view>
          
          <!-- 职业信息 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">职业信息</text>
            </view>
            
            <view class="space-y-32rpx">
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">医疗机构 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.hospital" 
                  type="text" 
                  placeholder="工作单位名称" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">科室 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.department" 
                  type="text" 
                  placeholder="所在科室" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">专业 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.major" 
                  type="text" 
                  placeholder="您的专业方向" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">学历 <text class="text-red-500">*</text></text>
                <PickerInput 
                  v-model="formData.education" 
                  :columns="[educationOptions]"
                  placeholder="请选择学历"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">职业 <text class="text-red-500">*</text></text>
                <PickerInput 
                  v-model="formData.profession" 
                  :columns="[professionOptions]"
                  placeholder="请选择职业"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">职称 <text class="text-red-500">*</text></text>
                <PickerInput 
                  v-model="formData.title" 
                  :columns="[titleOptions]"
                  placeholder="请选择职称"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">职务</text>
                <input 
                  v-model="formData.position" 
                  type="text" 
                  placeholder="如护士长、主任等" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">工作年限 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.workYears" 
                  type="number" 
                  min="1" 
                  max="50" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
            </view>
          </view>
          
          <!-- 证书信息 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">证书信息</text>
            </view>
            
            <view class="space-y-32rpx">
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">执业资格证编号 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.licenseNumber" 
                  type="text" 
                  placeholder="护士执业证书编号" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">技术资格证编号 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.qualificationNumber" 
                  type="text" 
                  placeholder="专业技术资格证书编号" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">获得证书时间 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.certificateTime" 
                  type="text" 
                  placeholder="例如：2020年5月获得护师资格证书" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">是否为专科护士 <text class="text-red-500">*</text></text>
                <nut-radio-group v-model="formData.isSpecialty" direction="horizontal" class="mt-12rpx">
                  <nut-radio label="yes">是</nut-radio>
                  <nut-radio label="no">否</nut-radio>
                </nut-radio-group>
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">是否为师资人选 <text class="text-red-500">*</text></text>
                <nut-radio-group v-model="formData.isTeacher" direction="horizontal" class="mt-12rpx">
                  <nut-radio label="yes">是</nut-radio>
                  <nut-radio label="no">否</nut-radio>
                </nut-radio-group>
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">能级</text>
                <PickerInput 
                  v-model="formData.level" 
                  :columns="[levelOptions]"
                  placeholder="请选择能级"
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">培训项目</text>
                <input 
                  v-model="formData.training" 
                  type="text" 
                  placeholder="参加过的培训项目" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                />
              </view>
            </view>
          </view>
          
          <!-- 照片上传 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">照片上传</text>
            </view>
            
            <view class="w-full">
              <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">一寸证件照 <text class="text-red-500">*</text></text>
              <view 
                @click="handleUpload" 
                class="border-4rpx border-dashed border-gray-300 rounded-16rpx py-60rpx px-60rpx text-center bg-gray-50 transition-all hover:border-blue-400 hover:bg-blue-50 cursor-pointer"
              >
                <text class="i-carbon-cloud-upload text-96rpx text-blue-500 mb-30rpx block"></text>
                <text class="text-32rpx font-medium mb-30rpx block">点击或拖拽上传一寸证件照</text>
                <text class="text-28rpx text-gray-500">支持 JPG/PNG 格式，大小不超过 2MB</text>
              </view>
            </view>
          </view>
          
          <!-- 技术特长 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">技术特长</text>
            </view>
            
            <view class="w-full">
              <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">技术特长（基础护理除外） <text class="text-red-500">*</text></text>
              <text class="text-28rpx text-gray-500 mb-30rpx block">请按照技术特长由高往低逐一罗列（最多十项）</text>
              <view class="space-y-20rpx">
                <view class="flex items-center gap-20rpx" v-for="(skill, index) in formData.skills" :key="index">
                  <text class="text-32rpx font-medium text-gray-600 w-60rpx">{{ index + 1 }}.</text>
                  <input 
                    v-model="formData.skills[index]" 
                    type="text" 
                    :placeholder="`您的第${index + 1}项技术特长`"
                    class="flex-1 px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                    :required="index < 2"
                  />
                </view>
              </view>
            </view>
          </view>
          
          <!-- 个人简介 -->
          <view class="mb-50rpx !border-none border-dashed border-gray-200 pb-40rpx">
            <view class="text-36rpx text-blue-600 mb-32rpx pb-16rpx border-b-4rpx border-blue-100 flex items-center">
              <view class="bg-blue-100 w-64rpx h-64rpx rounded-full flex items-center justify-center text-blue-600 mr-20rpx">
                <IconFont name="edit text-32rpx"></IconFont>
              </view>
              <text class="font-semibold">个人简介</text>
            </view>
            
            <view class="space-y-32rpx">
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">个人简介 <text class="text-red-500">*</text></text>
                <textarea 
                  v-model="formData.introduction" 
                  placeholder="请按照院内医护人员介绍栏形式填写个人简介（200-500字）" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg min-h-240rpx resize-vertical box-border"
                  required
                ></textarea>
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">个人通讯地址 <text class="text-red-500">*</text></text>
                <input 
                  v-model="formData.address" 
                  type="text" 
                  placeholder="详细通讯地址" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                  required
                />
              </view>
              
              <view class="w-full">
                <text class="block mb-12rpx font-medium text-gray-700 text-30rpx">延续护理"互联网+护理服务"从业人员岗前培训合格证书编号</text>
                <input 
                  v-model="formData.certificateNumber" 
                  type="text" 
                  placeholder="与AnfineID一致" 
                  class="w-full px-24rpx py-24rpx border border-gray-300 rounded-12rpx text-30rpx transition-all bg-gray-50 focus:border-blue-400 focus:bg-white focus:shadow-lg box-border"
                />
              </view>
            </view>
          </view>
          
          <!-- 提交按钮 -->
          <view class="flex flex-col gap-24rpx mt-60rpx">
            <nut-button 
              type="primary" 
              class="w-full"
            >
              提交申请
            </nut-button>
            
          </view>
          
          <view class="text-center mt-40rpx text-28rpx text-gray-500">
            <text>我们承诺保护您的个人信息安全，详情请阅读</text>
            <text class="text-blue-500 underline">隐私政策</text>
          </view>
        </form>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Taro from '@tarojs/taro'
import Head from './head.vue'
import PickerInput from './PickerInput.vue'
import { IconFont } from '@nutui/icons-vue-taro'

// 选项数据
const educationOptions = [
  { text: '博士', value: 'doctor' },
  { text: '硕士', value: 'master' },
  { text: '本科', value: 'bachelor' },
  { text: '大专', value: 'college' },
  { text: '其他', value: 'other' }
]

const professionOptions = [
  { text: '护士', value: 'nurse' },
  { text: '医生', value: 'doctor' },
  { text: '治疗师', value: 'therapist' },
  { text: '其他', value: 'other' }
]

const titleOptions = [
  { text: '初级', value: 'primary' },
  { text: '护师', value: 'nurse' },
  { text: '主管护师', value: 'senior' },
  { text: '副主任护师', value: 'associate' },
  { text: '主任护师', value: 'professor' }
]

const levelOptions = [
  { text: 'N0', value: 'N0' },
  { text: 'N1', value: 'N1' },
  { text: 'N2', value: 'N2' },
  { text: 'N3', value: 'N3' },
  { text: 'N4', value: 'N4' }
]

// 表单数据
const formData = reactive({
// 基本信息
name: '',
idNumber: '',
gender: '',
age: '',
phone: '',
email: '',

// 职业信息
hospital: '',
department: '',
major: '',
education: '',
profession: '',
title: '',
position: '',
workYears: '',

// 证书信息
licenseNumber: '',
qualificationNumber: '',
certificateTime: '',
isSpecialty: '',
isTeacher: '',
level: '',
training: '',

// 照片上传
photo: null as File | null,

// 技术特长
skills: ['', '', '', '', '', '', '', '', '', ''],

// 个人简介
introduction: '',
address: '',
certificateNumber: ''
})

// 处理照片上传
const handleUpload = () => {
// 这里可以调用Taro.chooseImage或其他图片选择API
// @ts-ignore
Taro.chooseImage({
  count: 1,
  sizeType: ['compressed'],
  sourceType: ['album', 'camera'],
  success: (res: any) => {
    const tempFilePath = res.tempFilePaths[0]
    // 这里可以处理图片上传逻辑
    console.log('选择的图片:', tempFilePath)
  },
  fail: (err: any) => {
    console.error('选择图片失败:', err)
  }
})
}

// 处理表单重置
const handleReset = () => {
// 重置所有表单数据
Object.keys(formData).forEach(key => {
  if (key === 'skills') {
    formData.skills = ['', '', '', '', '', '', '', '', '', '']
  } else {
    (formData as any)[key] = ''
  }
})

// @ts-ignore
Taro.showToast({
  title: '表单已重置',
  icon: 'success'
})
}

// 处理表单提交
const handleSubmit = (e: Event) => {
e.preventDefault()

// 表单验证
if (!formData.name || !formData.idNumber || !formData.gender || !formData.age || 
    !formData.phone || !formData.email || !formData.hospital || !formData.department ||
    !formData.major || !formData.education || !formData.profession || !formData.title ||
    !formData.workYears || !formData.licenseNumber || !formData.qualificationNumber ||
    !formData.certificateTime || !formData.isSpecialty || !formData.isTeacher ||
    !formData.skills[0] || !formData.skills[1] || !formData.introduction || !formData.address) {
  // @ts-ignore
  Taro.showToast({
    title: '请填写所有必填项',
    icon: 'none'
  })
  return
}

// 身份证号码验证
const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (!idCardReg.test(formData.idNumber)) {
  // @ts-ignore
  Taro.showToast({
    title: '请输入正确的身份证号码',
    icon: 'none'
  })
  return
}

// 手机号码验证
const phoneReg = /^1[3-9]\d{9}$/
if (!phoneReg.test(formData.phone)) {
  // @ts-ignore
  Taro.showToast({
    title: '请输入正确的手机号码',
    icon: 'none'
  })
  return
}

// 邮箱验证
const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
if (!emailReg.test(formData.email)) {
  // @ts-ignore
  Taro.showToast({
    title: '请输入正确的邮箱地址',
    icon: 'none'
  })
  return
}

// 年龄验证
const age = parseInt(formData.age)
if (age < 18 || age > 65) {
  // @ts-ignore
  Taro.showToast({
    title: '年龄必须在18-65岁之间',
    icon: 'none'
  })
  return
}

// 工作年限验证
const workYears = parseInt(formData.workYears)
if (workYears < 5) {
  // @ts-ignore
  Taro.showToast({
    title: '工作年限必须至少5年',
    icon: 'none'
  })
  return
}

// 个人简介字数验证
if (formData.introduction.length < 200 || formData.introduction.length > 500) {
  // @ts-ignore
  Taro.showToast({
    title: '个人简介必须在200-500字之间',
    icon: 'none'
  })
  return
}

// 提交表单
// @ts-ignore
Taro.showLoading({
  title: '提交中...'
})

// 这里可以调用API提交表单数据
setTimeout(() => {
  // @ts-ignore
  Taro.hideLoading()
  // @ts-ignore
  Taro.showToast({
    title: '报名表提交成功！我们将尽快审核您的申请。',
    icon: 'success',
    duration: 3000
  })
  
  // 重置表单
  Object.keys(formData).forEach(key => {
    if (key === 'skills') {
      formData.skills = ['', '', '', '', '', '', '', '', '', '']
    } else {
      (formData as any)[key] = ''
    }
  })
}, 2000)
}
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>